<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - 柚聊实时聊天室</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #7eb3b7;
            --secondary-color: #99dbd1;
            --light-color: #fffdf1;
            --card-bg: #cceaf2;
            --dark-color: #333;
            --gray-color: #777;
            --light-gray: #f0f0f0;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .logo-icon {
            width: 32px;
            height: 32px;
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .nav-links a:hover, .nav-links a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 主要内容区域 */
        main {
            padding: 3rem 0;
            min-height: calc(100vh - 200px);
        }
        
        .page-title {
            text-align: center;
            margin-bottom: 2.5rem;
            color: var(--primary-color);
            position: relative;
        }
        
        .page-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            margin: 10px auto;
            border-radius: 2px;
        }
        
        /* 卡片样式 */
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        
        .card-title {
            color: var(--primary-color);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            font-size: 1.2rem;
        }
        
        /* 功能列表样式 */
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            background: white;
            padding: 1.5rem;
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .feature-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.2rem;
        }
        
        /* 联系方式样式 */
        .contact-methods {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .contact-method {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.8rem 1.2rem;
            background: white;
            border-radius: var(--border-radius);
            transition: var(--transition);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .contact-method:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .contact-icon {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--primary-color);
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
        
        .developer-info {
            font-style: italic;
            margin-top: 1rem;
            color: #e6f7ff;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }
            
            .nav-links {
                gap: 1rem;
            }
            
            .contact-methods {
                flex-direction: column;
            }
            
            .card {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <span class="logo-icon">
                        <svg t="1762146198299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10957" width="32" height="32">
                            <path d="M897.024 403.456c43.008 22.528 71.68 65.536 71.68 114.688v206.848c0 71.68-59.392 129.024-135.168 129.024h-4.096V962.56L634.88 854.016h-92.16c-30.72 0-61.44-10.24-83.968-28.672L542.72 768H716.8c92.16 0 176.128-67.584 176.128-176.128V403.456h4.096z" fill="#DAE9FF" p-id="10958"></path>
                            <path d="M270.336 720.896h-59.392c-71.68 0-131.072-59.392-131.072-131.072v-337.92c0-71.68 59.392-131.072 131.072-131.072h499.712c71.68 0 131.072 59.392 131.072 131.072v339.968c0 71.68-57.344 131.072-131.072 131.072H532.48" fill="#FFFFFF" p-id="10959"></path>
                            <path d="M245.76 245.76h430.08c22.528 0 40.96 18.432 40.96 40.96v286.72c0 22.528-18.432 40.96-40.96 40.96H245.76c-22.528 0-40.96-18.432-40.96-40.96V286.72c0-22.528 18.432-40.96 40.96-40.96z" fill="#DAE9FF" p-id="10960"></path>
                            <path d="M378.88 389.12c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m143.36 0c-16.384 0-30.72-14.336-30.72-30.72s14.336-30.72 30.72-30.72 30.72 14.336 30.72 30.72-14.336 30.72-30.72 30.72z m-133.12 81.92c0-12.288 8.192-20.48 20.48-20.48s20.48 8.192 20.48 20.48 8.192 20.48 20.48 20.48 20.48-8.192 20.48-20.48 8.192-20.48 20.48-20.48S512 458.752 512 471.04c0 34.816-26.624 61.44-61.44 61.44s-61.44-26.624-61.44-61.44z" fill="#3988FF" p-id="10961"></path>
                            <path d="M710.656 120.832H210.944c-71.68 0-131.072 59.392-131.072 131.072v339.968c0 71.68 59.392 131.072 131.072 131.072h100.352v-61.44h-98.304c-38.912 0-69.632-30.72-69.632-69.632V251.904c0-38.912 30.72-69.632 69.632-69.632h499.712c38.912 0 69.632 30.72 69.632 69.632v339.968c0 38.912-30.72 69.632-69.632 69.632h-194.56l-157.696 102.4-36.864 24.576 32.768 49.152L532.48 722.944h178.176c71.68 0 131.072-59.392 131.072-131.072V251.904c0-71.68-59.392-131.072-131.072-131.072z" fill="#3889FF" p-id="10962"></path>
                        </svg>
                    </span>
                    <span>柚聊</span>
                </div>
                <div class="nav-links">
                    <a href="login.html" class="nav-link">登录</a>
                    <a href="register.html" class="nav-link">注册</a>
                    <a href="about.html" class="nav-link active">关于我们</a>
                    <a href="help.html" class="nav-link">帮助中心</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main>
        <div class="container">
            <h1 class="page-title">关于柚聊 - 连接你我，实时沟通</h1>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-info-circle"></i> 项目简介
                </h2>
                <p>欢迎使用"柚聊"。</p>
                    <p>这是一个灵感来源于现代即时通讯需求的在线实时聊天室项目。</p>
                <p>"柚聊"旨在打造一个高效、便捷的沟通平台，让用户能够突破地域限制，与好友进行无缝的实时对话。我们专注于提升线上沟通的体验与效率，通过稳定可靠的技术架构，确保每一条消息、每一个文件都能安全、迅速地送达。</p>
            </div>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-star"></i> 核心功能
                </h2>
                <div class="features">
                    <div class="feature-item">
                        <div class="feature-icon"><i class="fas fa-user"></i></div>
                        <div>
                            <h3>用户账户系统</h3>
                            <p>安全的注册、登录及密码找回机制，守护您的账户安全。</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon"><i class="fas fa-users"></i></div>
                        <div>
                            <h3>好友关系管理</h3>
                            <p>轻松添加、管理您的好友列表，构建您的私人社交圈。</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon"><i class="fas fa-comments"></i></div>
                        <div>
                            <h3>实时消息传输</h3>
                            <p>基于WebSocket技术，实现文字消息的即时发送与接收，沟通零延迟。</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon"><i class="fas fa-images"></i></div>
                        <div>
                            <h3>富媒体消息支持</h3>
                            <p>不仅限于文字，您可以与好友分享图片、发送各类文件，甚至用有趣的表情包来表达心情。</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <div class="feature-icon"><i class="fas fa-lock"></i></div>
                        <div>
                            <h3>私密对话空间</h3>
                            <p>与您的好友建立一对一的专属聊天频道，保障沟通的私密性。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-cogs"></i> 技术背后
                </h2>
                <p>"柚聊"是一个基于 <strong>Java Spring Boot</strong> 框架构建的后端服务项目，并利用 <strong>WebSocket</strong> 协议实现了真正的全双工实时通信。这一技术选择确保了平台的高性能、高并发处理能力与稳定性，为您流畅的聊天体验提供了坚实的技术基础。</p>
            </div>
            
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-code"></i> 开发团队
                </h2>
                <p>"柚聊"由开发者 <strong>橘柚</strong> 倾力设计与开发。我们秉持着对技术的热爱与对用户体验的执着，不断打磨产品细节。</p>
                <p>如果您有任何技术合作、项目反馈或宝贵建议，我们非常乐意与您交流。</p>
                
                <div class="contact-methods">
                    <div class="contact-method">
                        <span class="contact-icon"><i class="fab fa-weixin"></i></span>
                        <span>微信: lmm2029889073</span>
                    </div>
                    <div class="contact-method">
                        <span class="contact-icon"><i class="fas fa-envelope"></i></span>
                        <span>QQ邮箱: 2029889073@qq.com</span>
                    </div>
                    <div class="contact-method">
                        <span class="contact-icon"><i class="fas fa-envelope"></i></span>
                        <span>网易邮箱: Liu_MengMeng@yeah.net</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2025 柚聊 - 实时聊天室项目 | 开发者: 橘柚</p>
                <p class="developer-info">联系方式: 微信 lmm2029889073 | QQ邮件 2029889073@qq.com | 网易邮箱 Liu_MengMeng@yeah.net</p>
            </div>
        </div>
    </footer>
</body>
</html>